<template>
  <li
    class="recharge-item"
    :class="{
      agentItem: isAgent,
      unable: productInfoVO.sellOut,
      active: pressId === prodObj.id && !productInfoVO.sellOut
    }"
    @touchstart="handleTouchStart"
    @touchend="handleTouchEnd"
  >
    <template v-if="prodType === 0">
      <div class="price-wrap">
        <div v-if="paytype == 0" class="tag-price">
          {{ productInfoVO.tagPrice }}元
        </div>
        <div v-if="paytype == 1" class="tag-price">
          {{ productInfoVO.skuBO && productInfoVO.skuBO.size }}
        </div>
        <div class="discount-price">优惠价 {{ productInfoVO.price }}元</div>
      </div>
      <div v-if="isAgent" class="profit">
        <span>省赚 {{ productInfoVO.profit }}</span>
      </div>
      <div v-if="productInfoVO.sellOut" class="sellout">
        售罄
      </div>
    </template>
    <template v-else-if="prodType === 1">
      <img class="img" :src="imageVO.imgAddr" />
    </template>
  </li>
</template>

<script>
export default {
  name: 'rechargeItem',
  props: {
    prodObj: {
      type: Object,
      default: () => {}
    },
    paytype: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      pressId: ''
    };
  },
  computed: {
    prodType() {
      const { type } = this.prodObj || {};
      return type || 0;
    },
    productInfoVO() {
      const { conferenceSpCardPrdInfo } = this.prodObj || {};
      if (conferenceSpCardPrdInfo && conferenceSpCardPrdInfo.price) {
        conferenceSpCardPrdInfo.price = Number(
          conferenceSpCardPrdInfo.price
        ).toFixed(2);
        console.error(conferenceSpCardPrdInfo.price);
      }
      return conferenceSpCardPrdInfo || {};
    },
    // 是否是店长
    isAgent() {
      return true;
    },
    imageVO() {
      const { conferenceSpCardCubeImageVo } = this.prodObj || {};
      return conferenceSpCardCubeImageVo || {};
    }
  },
  methods: {
    handleTouchStart() {
      this.pressId = this.prodObj.id;
    },
    handleTouchEnd() {
      this.pressId = '';
    }
  }
};
</script>

<style lang="scss">
.recharge-item {
  width: 104px;
  height: 62px;
  border: 0.5px solid #f5a7a7;
  border-radius: 2px;
  margin: 0 6px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;

  .price-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .sellout {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: #fff;
    background: rgba(51, 51, 51, 0.8);
    font-size: 14px;
    font-family: PingFangSC-Regular;
  }

  .tag-price {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    text-align: center;
    // line-height: 22px;
    margin-bottom: 2px;
  }

  .discount-price {
    font-size: 11px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 18px;
    text-align: center;
  }

  .profit {
    width: 100%;
    height: 20px;
    font-size: 11px;
    border-radius: 0 0 2px 2px;
    font-family: PingFangSC-Regular;
    background: rgba(255, 243, 243, 1);
    color: rgba(230, 37, 37, 1);
    text-align: center;
    line-height: 22px;
  }

  img {
    width: 102px;
  }

  &.active {
    background: rgba(230, 37, 37, 0.05);
  }

  &.unable {
    border: 1px solid #ccc;

    .tag-price {
      font-size: 18px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: #ccc;
      text-align: center;
      line-height: 25px;
    }

    .discount-price {
      font-size: 12px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: #ccc;
      text-align: center;
      line-height: 19px;
    }

    .profit {
      width: 100%;
      height: 20px;
      font-size: 11px;
      border-radius: 0 0 2px 2px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      background: #f5f5f5;
      color: #333;
      text-align: center;
      line-height: 22px;
    }
  }
  .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}
.agentItem {
  height: 69px;
  .tag-price {
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
  }
}
.recharge-item.unable .profit span {
  color: #ccc;
}
</style>
